<template>
    <div class="findbox">
        <!-- 排行榜页 -->
        <loading v-show="!show" class="ding"></loading>
        <div class="juz" v-show="show">
            <!-- <ul class="gd" v-show="show">
                <li v-for='item in myarr' :key="item.id">
                    <router-link :to='{path:"/songlist",query:{id:item.id}}'>
                        <div class="gdimg">
                            <img v-lazy='item.src' alt="">
                        </div>
                        <div class="gdname">
                            <div class="gdtitle">{{item.name}}</div>
                            <div class="songnum">{{item.miaoshu}}</div>
                        </div>
                        <div class="gdding">
                            ›
                        </div>
                    </router-link>
                </li>
            </ul> -->
            <van-tabs v-model="active" :scrollspy="true" :sticky="true">
                <van-tab :title="'官方榜'" >
                    <div class="phbbox jb">
                        <p>官方榜</p>
                        <ul class="gfbox">
                            <li v-for="(item,index) in guanfang" :key="item.id" @click="go(item.id)">
                                <div :class="['firstbox'+index]" class="firstbox">
                                    <div class="firstleft" v-if="show">
                                        <div :class="'lname'+index" class="allname">{{item.name}}</div>
                                        <div class="ltimg iimg"><img v-lazy="item.song[0].src" alt=""></div>
                                        <div class="lsimg iimg"><img v-lazy="item.song[1].src" alt=""></div>
                                        <div class="lhimg iimg"><img v-lazy="item.song[2].src" alt=""></div>
                                    </div>
                                    <div class="firstright">
                                        <ol v-if="show">
                                            <li v-for="(items,ind) in item.song" :key="items.id">
                                                {{(ind+1)+'. '+items.name}} - <span>{{items.people}}</span>
                                            </li>
                                        </ol>
                                    </div>
                                    <div class="youshang">
                                        {{item.updata}}
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab :title="'ACG榜'" >
                    <div class="phbbox ha">
                        <p>ACG榜</p>
                        <ul class="acgbox">
                            <li v-for="item in acg" :key="item.id">
                                <phb v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:myupdata="item.updata" v-bind:myid="item.id"></phb>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab :title="'精选榜'" >
                    <div class="phbbox ha">
                        <p>精选榜</p>
                        <ul class="jxbox">
                            <li v-for="item in jinxuan" :key="item.id">
                                <phb v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:myupdata="item.updata" v-bind:myid="item.id"></phb>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab :title="'曲风榜'" >
                    <div class="phbbox ha">
                        <p>曲风榜</p>
                        <ul class="qfbox">
                            <li v-for="item in qufeng" :key="item.id">
                                <phb v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:myupdata="item.updata" v-bind:myid="item.id"></phb>
                            </li>
                        </ul>
                    </div>
                </van-tab>
                <van-tab :title="'全球榜'" >
                    <div class="phbbox ha">
                        <p>全球榜</p>
                        <ul class="qqbox">
                            <li v-for="item in quanqiu" :key="item.id">
                                <phb v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:myupdata="item.updata" v-bind:myid="item.id"></phb>
                            </li> 
                        </ul>
                    </div>
                </van-tab>
                <van-tab :title="'特色榜'" >
                    <div class="phbbox ha zh">
                        <p>特色榜</p>
                        <ul class="tsbox">
                            <li v-for="item in tese" :key="item.id">
                                <phb v-bind:mysrc="item.src" v-bind:myname="item.name" v-bind:myupdata="item.updata" v-bind:myid="item.id"></phb>
                            </li>
                        </ul>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
import loading from "../small/loading.vue"
import phb from "../small/phb.vue"
export default {
    name:"find",
    data(){
        return {
            myarr:[],
            show:false,
            guanfang:[],
            acg:[],
            jinxuan:[],
            qufeng:[],
            quanqiu:[],
            tese:[],
            donknow:[],
            active:0,
            sz:0,
        }
    },
    created(){
        // if(sessionStorage.getItem("phb") === null){
            this.getdata()
        // }else{
        //     this.myarr = JSON.parse(sessionStorage.getItem("phb"))
        //     this.show = true
        // }
    },
    components:{
        loading,
        phb
    },
    methods:{
        getdata(){
            axios.get(`https://apis.netstart.cn/music/toplist`).then(
                res=>{
                    // console.log(res)
                    let newarr = res.data.list
                    for(let i = 0;i<newarr.length;i++){
                        let obj = {}
                        obj.name = newarr[i].name
                        obj.src = newarr[i].coverImgUrl
                        obj.id = newarr[i].id
                        obj.updata = newarr[i].updateFrequency
                        this.pd(obj)
                    }
                    this.getgfdata()
                    // this.show = true
                    // sessionStorage.setItem("phb",JSON.stringify(this.myarr))
                },
                err=>{
                    console.log(err)
                }
            )
        },
        pd(obj){
            if(obj.name == "飙升榜" || obj.name == "新歌榜" || obj.name == "热歌榜" || obj.name == "原创榜" || obj.name == "畅销榜" || obj.name == "最火视频榜"){
                this.guanfang.push(obj)
            }else if(obj.name == "硬地原创音乐榜" || obj.name == "黑胶VIP爱听榜" || obj.name == "K歌榜" || obj.name == "音乐达人榜" || obj.name == "网络热歌榜"){
                this.jinxuan.push(obj)
            }else if(obj.name == "云音乐电音榜" || obj.name == "云音乐说唱榜" || obj.name == "云音乐摇滚榜" || obj.name == "云音乐民谣榜" || obj.name == "云音乐国电榜" || obj.name == "云音乐古典榜" || obj.name == "云音乐古风榜" || obj.name == "中文DJ榜"){
                this.qufeng.push(obj)
            }else if(obj.name == "美国Billboard榜" || obj.name == "UK排行榜周榜" || obj.name == "日本Oricon榜" || obj.name == "法国 NRJ Vos Hits 周榜" || obj.name == "俄罗斯top hit流行音乐榜" || obj.name == "云音乐欧美新歌榜" || obj.name == "云音乐欧美热歌榜" || obj.name == "云音乐日语榜" || obj.name == "云音乐韩语榜" || obj.name == "俄语榜" || obj.name == "越南语榜" || obj.name == "泰语榜"){
                this.quanqiu.push(obj)
            }else if(obj.name == "云音乐ACG动画榜" || obj.name == "云音乐ACG游戏榜"|| obj.name == "云音乐ACG VOCALOID榜"|| obj.name == "云音乐ACG榜"){
                this.acg.push(obj)
            }else if(obj.name == "听歌识曲榜" || obj.name == "潜力爆款榜" || obj.name == "中国新乡村音乐排行榜" || obj.name == "KTV唛榜" || obj.name == "Beatport全球电子舞曲榜"){
                this.tese.push(obj)
            }else{
                this.donknow.push(obj)
            }
        },
        getgfdata(){
            for(let i = 0;i<this.guanfang.length;i++){
                axios.get(`https://apis.netstart.cn/music/playlist/detail?id=${this.guanfang[i].id}`).then(
                    res=>{
                        // console.log(this.guanfang[i].name,res)
                        this.getthename(i,res.data.privileges.slice(0,3))
                    },
                    err=>{
                        console.log(err)
                    }
                )
            }
        },
        getthename(num,arr){
            this.guanfang[num].song = []
            let str = ''
            for(let j = 0;j<arr.length;j++){
                if(j == 0){
                    str += arr[j].id
                }else{
                    str += ","+arr[j].id
                }
            }
            // console.log(str)
            axios.get(`https://apis.netstart.cn/music/song/detail?ids=${str}`).then(
                res=>{
                    // console.log(this.guanfang[num].name,res)
                    let songarr = res.data.songs
                    for(let i = 0;i<songarr.length;i++){
                        let obj = {}
                        obj.name = songarr[i].name
                        obj.id = songarr[i].id
                        obj.people = ''
                        for(let j = 0;j<songarr[i].ar.length;j++){
                            if(j == 0){
                                obj.people += songarr[i].ar[j].name
                            }else{
                                obj.people += "/" + songarr[i].ar[j].name
                            }
                        }
                        obj.src = songarr[i].al.picUrl
                        this.guanfang[num].song.push(obj)
                    }
                    this.sz += 1
                    if(this.sz == 4){
                        this.show = true
                    }
                },
                err=>{
                    console.log(err)
                }
            )
        },
        go(id){
            this.$router.push({path:'/songlist',query:{id:id}})
        }
    }
}
</script>
<style lang="less" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color:#333;
    -webkit-tap-highlight-color:transparent;
}
.findbox{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    // margin-top: 75px;
    // padding-top: 65px;
    padding-bottom: 60px;
    box-sizing:border-box;
    background-color: #f0efef47;
    &::-webkit-scrollbar { width: 0 !important }
}
.juz{
    width: 100%;
    &::-webkit-scrollbar { width: 0 !important }
}
.gd{
    width: 100%;
    // height: 300px;
    border-radius: 10px;
    // padding: 10px;
    box-sizing: border-box;
    li{
        margin: 15px 0px ;
        background-color: white;
        position: relative;
        padding: 10px;
        border-radius: 10px;
        a{
            display: flex;

        }
    }
}
.gdimg{
    width: 25%;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0px;
    img{
        width: 100%;
        border-radius: 10px;
    }
}
.gdname{
    margin-left:15px;
    width: 60%;
    .gdtitle{
        font-size: 1rem;
        color: #333;
        margin-top: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .songnum{
        font-size: 0.8rem;
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.gdding{
    position: absolute;
    top: 40%;
    right: 5%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: rgb(163,163,163);

}
.ding{
    // margin-top:150px;
    height: 100%;
    width:100%;
}
p{
    margin: 0;
    font-weight: 700;
    padding-left: 5%;
    
    // padding-top:30px;
    margin-bottom: 20px;
    font-size: 20px;
    height: 16px;
    line-height: 16px;
    font-family: "YouYuan";
    position: relative;
    color:#4475b7;
    &::after{
        content: " ";
        position: absolute;
        left: 2.5%;
        top: 50%;
        margin-top: -9px;
        width: 1rem;
        border-radius: 50%;
        height: 1rem;
        background-color: #4475b759;
    }
}
.phbbox{
    background: white;
    border-radius:20px;
    margin-top:20px;
    padding-top:1px;
}
.jb{
    // background: liner-gradient(rgb(250,250,250),white);
    background: linear-gradient(rgb(250,250,250),white);
}
.zh{
    // background: liner-gradient(rgb(250,250,250),white);
    background: linear-gradient(white,rgb(250,250,250));
}
.gfbox{
    padding-bottom:20px;
    li{
        .firstbox{
            display:flex;
            position:relative;
            width:80%;
            margin:0 auto;
            margin-bottom:20px;
            padding:20px;
            border-radius:10px;
            .firstleft{
                flex-shrink: 0;
                width:28%;
                position: relative;
                .allname{
                    font-size:25px;
                    text-align: center;
                    font-weight:600;
                    margin-bottom:10px;
                }
                .lname0{
                    color:rgb(234,46,118);
                }
                .lname1{
                    color:rgb(46,158,143);
                }
                .lname2{
                    color:rgb(225,37,36);
                }
                .lname3{
                    color:rgb(57,113,195);
                }
                .iimg{
                    width:100%;
                    // border-radius:20%;
                    // overflow: hidden;
                    font-size:0px;
                    img{
                        width:100%;
                        border-radius:20%;
                        overflow: hidden;
                    }
                }
                .ltimg{
                    width:90%;
                    position:relative;
                    z-index:5;
                    img{
                        width:100%;
                    }
                }
                .lsimg{
                    width:70%;
                    position:absolute;
                    bottom:0px;
                    z-index:3;
                    right:-5px;
                    img{
                        width:100%;
                        opacity: 0.5;
                    }
                }
                .lhimg{
                    width:40%;
                    position:absolute;
                    bottom:0px;
                    z-index:1;
                    right:-13px;
                    img{
                        opacity: 0.2;
                        width:100%;
                    }
                }
            }
            .firstright{
                width:60%;
                margin-left:30px;
                ol{
                    margin-top:20px;
                    li{
                        margin-top:10px;
                        margin-bottom:10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        span{
                            color:#888;
                            font-size:15px;
                        }
                    }
                }
            }
            .youshang{
                position:absolute;
                top:10px;
                right:10px;
                font-size:14px;
                color:#bbb;
            }
        }
        .firstbox0{
            background: rgba(244,225,231, 0.5);
        }
        .firstbox1{
            background: rgba(225,235,234, 0.5);
        }
        .firstbox2{
            background: rgba(243,225,225, 0.5);
        }
        .firstbox3{
            background: rgba(227,231,240, 0.5);
            margin-bottom:0px;
        }
    }
}
.acgbox,.jxbox,.qfbox,.qqbox,.tsbox{
    width:90%;
    margin:0 auto;
    padding-bottom:10px;
    display:flex;
    flex-wrap:wrap;
    li{
        margin-bottom:10px;
        width:30%;
        margin-right:3.33%;
        position:relative;
    }
}
.ha{
    padding-top:20px;
}

</style>